<template>
  <div class="thumb">
    <swiper class="swiper gallery-top" :options="swiperOptionTop" ref="swiperTop">
      <swiper-slide class="slide-img" v-for="(item, index) of imgList" :key="index"
        :style="{ 'background-image': 'url(' + item.picUrl + ')' }"></swiper-slide>
      <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
      <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
    </swiper>
    <swiper class="swiper gallery-thumbs" :options="swiperOptionThumbs" ref="swiperThumbs">
      <swiper-slide class="slide-img" v-for="(item, index) of imgList" :key="index"
        :style="{ 'background-image': 'url(' + item.picUrl + ')' }"></swiper-slide>
    </swiper>
  </div>
</template>

<script>
import { carouselList } from "@/api/home"; 
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
export default {
  name: 'Index',
  components: {
    Swiper,
    SwiperSlide
  },
  data () {
    return {
      imgList: [],
      swiperOptionTop: {
        loop: true,
        loopedSlides: 5,
        spaceBetween: 10,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        autoplay: true
      },
      swiperOptionThumbs: {
        autoplay: true,
        loop: true,
        loopedSlides: 5,
        spaceBetween: 10,
        centeredSlides: true,
        slidesPerView: 'auto',
        touchRatio: 0.2,
        slideToClickedSlide: true
      }
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    async getList () {
      this.loading = true;
      const res = await carouselList(this.addDateRange({
        pageIndex: 1,
        pageSize: 200,
      }))
      this.loading = false;
      if (res.code === 200) {
        this.imgList = res.data || [];
        setTimeout(() => {
          const swiperTop = this.$refs.swiperTop.$swiper
          const swiperThumbs = this.$refs.swiperThumbs.$swiper
          swiperTop.controller.control = swiperThumbs
          swiperThumbs.controller.control = swiperTop
        }, 0);
      } else {
        this.imgList = [];
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.thumb {
  padding: 18px;
  height: calc(100vh - 86px);
}

.swiper {
  .swiper-slide {
    background-size: cover;
    background-position: center;

    &.slide-1 {
      background-image: url('./../assets/images/1.jpg');
    }
  }

  &.gallery-top {
    height: 80%;
    width: 100%;
  }

  &.gallery-thumbs {
    height: 20%;
    box-sizing: border-box;
    padding: 12px 0;
  }

  &.gallery-thumbs .swiper-slide {
    width: 25%;
    height: 100%;
    opacity: 0.4;
  }

  &.gallery-thumbs .swiper-slide-active {
    opacity: 1;
  }
}
</style>
